<script type="text/html" id="menu-head-bar">
    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除
    </button>
</script>
<script type="text/html" id="menu-row-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-menu">编辑</a>
</script>
<table id="menu-table" lay-filter="menu-table">
</table>
<script type="text/javascript" th:inline="none">
    //layui use只能出现一次
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table;//获取表格插件
        var layer = layui.layer;
        var form = layui.form;
        //使用插件渲染表格
        table.render({
            id: 'menu-table',
            elem: '#menu-table',//页面中表格元素的id   id="demo"的元素
            url: 'menu.html?act=table',//后台controller中的地址  @RequestMapping
            toolbar: "#menu-head-bar",
            cols: [[
                {
                    field: 'name', title: '菜单名', templet: function (d) {
                    var left = (d.level - 1) * 40;//每一级缩进20像素
                    return '<span style="margin-left:' + left + 'px">' + d.name + '</span>'
                }
                },
                {field: 'parentId', title: '父id', width: 80},
                {field: 'url', title: '地址'},
                {field: 'perms', title: '权限'},
                {
                    field: 'type', title: '状态', templet: function (d) {//d是当前这一行的数据
                    switch (d.type) {
                        case 1:
                            return '<span class="layui-badge">目录</span>'
                        case 2:
                            return ' <span class="layui-badge layui-bg-orange">菜单</span>'
                        case 3:
                            return '<span class="layui-badge layui-bg-green">按钮</span>'
                    }
                }
                },
                {field: 'sort', title: '排序'},
                {fixed: 'right', title: '操作', toolbar: '#menu-row-bar'}
            ]]
        })
        //监听menu-table它的头部工具栏的点击事件
        table.on('toolbar(menu-table)', function (obj) {
            switch (obj.event) {
                case 'add'://点击添加
                    openEditWindow(null);
                    break;
                case 'delete'://点击删除
            }
        })
        table.on('tool(menu-table)', function (obj) {
            switch (obj.event) {
                case 'edit-menu':{
                    openEditWindow(obj.data);
                    return;
                }
            }
        });
        function openEditWindow(data){
            layer.open({
                type: 1,
                area: ['500px', '500px'],//弹窗大小
                title: "编辑菜单",
                zIndex: 2000,
                content: $("#menu-edit-window").html()//弹窗内容
                , success: function (layero, index) {//弹窗弹出之后执行
                    form.render();//重新渲染表单
                    $("#parentId").combotree({
                        url: 'menu.html?act=tree'
                        ,valueField: 'id',//传给后台的 select 的value
                        textField: 'name',//页面上看见的
                        formatter: function (node) {//因为json数据中没有text,树默认要text属性当节点名，需要自己转换
                            return node.name;
                        }
                    });
                    if(data!=null){//修改
                        form.val("menu-edit-form", data);
                        form.val("menu-edit-form", {'type':data.type+''});
                    }
                },btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) {
                    $.ajax({
                        url:"menu.html?act="+(data==null?'add':'update'),
                        method:"post",
                        data:$("#menu-edit-form").serialize(),
                        success:function(json){
                            if(json.status){//添加成功
                                table.reload("menu-table",{});
                                layer.close(index)
                            }
                        }
                    })
                }, btn2: function (index, layero) {//第二个按钮
                    layer.close(index)
                }
            })
        }
    })

</script>

<script type="text/html" id="menu-edit-window">
    <form id="menu-edit-form" style="width: 90%;padding-top:20px" lay-filter="menu-edit-form" class="layui-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="1" title="目录" lay-filter="menu-type">
                <input type="radio" name="type" value="2" title="菜单" lay-filter="menu-type">
                <input type="radio" name="type" value="3" title="按钮" lay-filter="menu-type">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入菜单名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">父节点</label>
            <div class="layui-input-block">
                <input name="parentId" id="parentId"
                       style="width:220px;">
                <button onclick="$('#parentId').combotree('clear')" type="button" class="layui-btn layui-btn-sm">清空
                </button>
            </div>
        </div>
        <div class="layui-form-item" id="url-div">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-block">
                <input type="text" name="url" placeholder="请输入url" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="menu-sort">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" placeholder="请输入整数" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <input type="text" name="perms" lay-verify="required" placeholder="请输入权限" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>